<template>
  <div class="chatrecord">
    <zhHeader title="聊天列表" :leftRouter="{name: 'user'}">
      <span slot="left">返回</span>
    </zhHeader>
    <ul class="record bcwh">
      <li v-for="(mes, index) in message.abstract" :key="index" class="item" @click="doAction">
        <img :src="mes.preview" class="preview">
        <div class="content ovh">
          <div class="info ovh">
            <div class="name left">{{mes.name}}</div>
            <div class="time right">{{mes.time}}</div>
          </div>
          <div class="message">{{mes.message}}</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import zhHeader from '@/components/Header'
export default {
  components: {
    zhHeader
  },
  data() {
    return {
      // 假设消息列表格式如下
      message: {
        total: 2, // 几个对话
        abstract: [{  // 消息摘要
          id: '1',
          readable: 0, // 未读消息条数
          preview: 'https://ws1.sinaimg.cn/large/0069WcBigy1fnn5zfr5wsj302s02rglv.jpg',
          name: '妮可',
          time: '昨天',
          message: 'loremloremloremloremloremloremloremloremloremloremloremloremlorem' // 最后一条未读消息(包含自己)
        },{  // 消息摘要
          id: '2',
          readable: 1, // 未读消息条数
          preview: 'https://www.lovelivewiki.com/images/2/24/LL_kotorileft_filter.png',
          name: '南小鸟',
          time: '2月1日',
          message: 'lorem' // 最后一条未读消息(包含自己)
        }]
      }
    }
  },
  methods: {
    doAction() {
      this.$router.push({name: 'chat', query: {redirect: 'chatRecord'}})
    }
  }
}
</script>

<style lang="stylus">
.chatrecord
  >.record
    font-size: .48rem
    .item
      display: flex
      height: 2.2rem
      padding: 5px 5px 0 5px
      overflow: hidden
      &:not(:last-child)
        border-bottom: 1px solid #eee
    .preview
      width: 1.7rem
      height: 1.7rem
      border-radius: 100%
      margin-right: 10px
    .content
      flex: 1
      line-height: 1rem
      width: calc(100% - 1.8rem)
    .name
      font-size: 0.56rem
    .time
      text-align: right
      color: #999
      font-size: .44rem
    .message
      color: #999
      overflow: hidden
      text-overflow: ellipsis
</style>


